History.tsx ➔ Wallet - Code Metrics - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

History.tsx ➔ Wallet B
last analyzed 2023-01-12 17:40 UTC

↳ Parent: components/drawer/History.tsx

Complexity

Conditions

Size

Total Lines	104
Code Lines	78

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	78
dl	0
loc	104
rs	7.2533
c	0
b	0
f	0
cc	5

How to fix Long Method

import React from 'react';
import { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Pressable, Modal, TextInput, ScrollView} from 'react-native';
import userModel from '../../models/user';
import Icon from 'react-native-vector-icons/Octicons';
import mapModel from '../../models/map';
import HistoryMap from './HistoryMap';

export default function Wallet({navigation}): any {
    const [history, setHistory] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const [currentJourney, setCurrentJourney] = useState(null);
    const [noHistory, setNoHistory] = useState(false);
    const [distance, setDistance] = useState(null)
    
    
    async function getHistory(): Promise<void> {
        const result = await userModel.getHistory();

        if (result.length === 0) {
            setNoHistory(true);
            return;
        }
        setHistory(result);
        
        console.log(history);
        
        // const travelDistance = mapModel.calcDistance(result['startPosition']['latitude'], result['startPosition']['longitudo'], result['endPosition']['latitude'], result['endPosition']['longitude'])

        // setDistance(travelDistance);

        setNoHistory(false);
    };


        // Get history for logged in user
        useEffect(() => {
            getHistory();
            
        }, []);

        // Reload history on focus
        useEffect(() => {
            navigation.addListener('focus', () => getHistory())
        }, []);


        function getDistance(history) {
            const travelDistance = mapModel.calcDistance(history['startPosition']['latitude'], history['startPosition']['longitude'], history['endPosition']['latitude'], history['endPosition']['longitude']);

            return travelDistance.toFixed(2).toString();
            
            
        }
    return (
        <View style={styles.container}>

            <View style={styles.titleContainer}>
                
                <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => navigation.navigate('Map')}>
                    <Icon 
                        name='x' 
                        size={25} 
                        color='black'
                    />
                </Pressable>
                
                <Text style={styles.title}>Ride History</Text>

                <View style={{width: 50}}></View>

            </View>
            
            {noHistory ? 
                <Text style={{color: 'gray'}}>No travel history to show</Text>
                :
                <ScrollView style={styles.prepaidContainer}>
                {history.map((h, index) => (
                <Pressable onPress={() => {
                    setCurrentJourney(h)
                    setModalVisible(true)
                }}
                key={index}
                >

         
                <View style={styles.rideHistory}>

                    <View style={styles.primaryInfo}>
                        <Text style={styles.textDistance}>
                            {getDistance(h)} km / {h.totalMin} min 
                        </Text>
                        <Text style={styles.textCost}>{h.totalPrice} kr</Text>
                    </View>
                    
                    <View style={styles.secondaryInfo}>
                        <Text style={styles.textDate}>{h.date}</Text>
                    </View>
                </View>
                </Pressable>
                ))}
                <HistoryMap navigation={navigation} journey={currentJourney} modalVisible={modalVisible} setModalVisible={setModalVisible}></HistoryMap>
                </ScrollView>
                  
                }
           
            

              
                
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      height: '50%',
      width: '100%'
    },

    rideHistory: {
        width: '100%',
        flexDirection: 'column',
        marginBottom: 20,
        borderBottomWidth: 1,
        padding: 5,
        borderBottomColor: 'grey',
    },

    titleContainer: {
        marginTop: 20,
        width: '100%',
        flexDirection: 'row',
        height: 100,
        justifyContent: 'center',
        alignItems: 'center'
    },

    textDistance: {
        textAlign: 'left',
        fontWeight: '600',
        fontSize: 16,
    },

    textCost: {
        textAlign: 'right',
        fontWeight: '600',
        fontSize: 16
    },

    textDate: {
        width: '100%',
        color: 'grey'
    },



    primaryInfo: {
        justifyContent: 'space-between',
        width: '100%',
        flexDirection: 'row'
    },

    secondaryInfo: {
        justifyContent: 'flex-start',
        width: '100%',
        marginBottom: 10
    },


    infoContainer: {
        width: '100%',
        height: '20%',
        alignItems: 'center',
        justifyContent: 'space-evenly',

    },

    prepaidContainer: {
        width: '90%',
        height: '90%',
    },

    buttonText: {
        color: 'white'
    },

    backButton: {
        width: 40,
        height: 40, 
        backgroundColor: 'white',
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },
    modalCloseContainer: {
        width: '90%',
        alignItems: 'flex-end',
    },

    closeButton: {
        width: 25,
        height: 25, 
        backgroundColor: 'white',
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },

    title: {
        fontWeight: 'bold',
        fontSize: 20,
        width: '70%',
        textAlign: 'center'
    },

    balance: {
        fontWeight: 'bold',
        fontSize: 50
    },

    info: {
        fontSize: 15,
        width: '80%',
        color: 'gray',
        textAlign: 'center'
    },

    prepaidInfo: {
        fontWeight: 'bold',
        fontSize: 18
    },

    shadowProp: {
        elevation: 5,
        shadowColor: 'black'
      },

    modalContainer: {
        backgroundColor: 'rgba(220, 220, 220, 0.6)',
        width: '100%',
        height: '100%',
        flex: 1,
    },
    
    modalMessage: {
        backgroundColor: 'white',
        width: '100%',
        height: '25%',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 25
    },

    input: {
        width: '90%',
        marginBottom: 30,
        borderRadius: 10,
        height: 50,
        padding: 10,
        borderBottomWidth: 2,
        borderColor: 'gray'
    },
});

1			import React from 'react';
2			import { useState, useEffect } from 'react';
3			import { StyleSheet, Text, View, Pressable, Modal, TextInput, ScrollView} from 'react-native';
4			import userModel from '../../models/user';
5			import Icon from 'react-native-vector-icons/Octicons';
6			import mapModel from '../../models/map';
7			import HistoryMap from './HistoryMap';
8
9			export default function Wallet({navigation}): any {
10			const [history, setHistory] = useState([]);
11			const [modalVisible, setModalVisible] = useState(false);
12			const [currentJourney, setCurrentJourney] = useState(null);
13			const [noHistory, setNoHistory] = useState(false);
14			const [distance, setDistance] = useState(null)
15
16
17			async function getHistory(): Promise<void> {
18			const result = await userModel.getHistory();
19
20			if (result.length === 0) {
21			setNoHistory(true);
22			return;
23			}
24			setHistory(result);
25
26			console.log(history);
27
28			// const travelDistance = mapModel.calcDistance(result['startPosition']['latitude'], result['startPosition']['longitudo'], result['endPosition']['latitude'], result['endPosition']['longitude'])
29
30			// setDistance(travelDistance);
31
32			setNoHistory(false);
33			};
34
35
36			// Get history for logged in user
37			useEffect(() => {
38			getHistory();
39
40			}, []);
41
42			// Reload history on focus
43			useEffect(() => {
44			navigation.addListener('focus', () => getHistory())
45			}, []);
46
47
48			function getDistance(history) {
49			const travelDistance = mapModel.calcDistance(history['startPosition']['latitude'], history['startPosition']['longitude'], history['endPosition']['latitude'], history['endPosition']['longitude']);
50
51			return travelDistance.toFixed(2).toString();
52
53
54			}
55			return (
56			<View style={styles.container}>
57
58			<View style={styles.titleContainer}>
59
60			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => navigation.navigate('Map')}>
61			<Icon
62			name='x'
63			size={25}
64			color='black'
65			/>
66			</Pressable>
67
68			<Text style={styles.title}>Ride History</Text>
69
70			<View style={{width: 50}}></View>
71
72			</View>
73
74			{noHistory ?
75			<Text style={{color: 'gray'}}>No travel history to show</Text>
76			:
77			<ScrollView style={styles.prepaidContainer}>
78			{history.map((h, index) => (
79			<Pressable onPress={() => {
80			setCurrentJourney(h)
81			setModalVisible(true)
82			}}
83			key={index}
84			>
85
86
87			<View style={styles.rideHistory}>
88
89			<View style={styles.primaryInfo}>
90			<Text style={styles.textDistance}>
91			{getDistance(h)} km / {h.totalMin} min
92			</Text>
93			<Text style={styles.textCost}>{h.totalPrice} kr</Text>
94			</View>
95
96			<View style={styles.secondaryInfo}>
97			<Text style={styles.textDate}>{h.date}</Text>
98			</View>
99			</View>
100			</Pressable>
101			))}
102			<HistoryMap navigation={navigation} journey={currentJourney} modalVisible={modalVisible} setModalVisible={setModalVisible}></HistoryMap>
103			</ScrollView>
104
105			}
106
107
108
109
110
111			</View>
112			)
113			}
114
115			const styles = StyleSheet.create({
116			container: {
117			flex: 1,
118			backgroundColor: '#fff',
119			alignItems: 'center',
120			height: '50%',
121			width: '100%'
122			},
123
124			rideHistory: {
125			width: '100%',
126			flexDirection: 'column',
127			marginBottom: 20,
128			borderBottomWidth: 1,
129			padding: 5,
130			borderBottomColor: 'grey',
131			},
132
133			titleContainer: {
134			marginTop: 20,
135			width: '100%',
136			flexDirection: 'row',
137			height: 100,
138			justifyContent: 'center',
139			alignItems: 'center'
140			},
141
142			textDistance: {
143			textAlign: 'left',
144			fontWeight: '600',
145			fontSize: 16,
146			},
147
148			textCost: {
149			textAlign: 'right',
150			fontWeight: '600',
151			fontSize: 16
152			},
153
154			textDate: {
155			width: '100%',
156			color: 'grey'
157			},
158
159
160
161			primaryInfo: {
162			justifyContent: 'space-between',
163			width: '100%',
164			flexDirection: 'row'
165			},
166
167			secondaryInfo: {
168			justifyContent: 'flex-start',
169			width: '100%',
170			marginBottom: 10
171			},
172
173
174			infoContainer: {
175			width: '100%',
176			height: '20%',
177			alignItems: 'center',
178			justifyContent: 'space-evenly',
179
180			},
181
182			prepaidContainer: {
183			width: '90%',
184			height: '90%',
185			},
186
187			buttonText: {
188			color: 'white'
189			},
190
191			backButton: {
192			width: 40,
193			height: 40,
194			backgroundColor: 'white',
195			borderRadius: 25,
196			borderWidth: 1,
197			borderColor: 'gray',
198			alignItems: 'center',
199			justifyContent: 'center'
200			},
201			modalCloseContainer: {
202			width: '90%',
203			alignItems: 'flex-end',
204			},
205
206			closeButton: {
207			width: 25,
208			height: 25,
209			backgroundColor: 'white',
210			borderRadius: 25,
211			borderWidth: 1,
212			borderColor: 'gray',
213			alignItems: 'center',
214			justifyContent: 'center'
215			},
216
217			title: {
218			fontWeight: 'bold',
219			fontSize: 20,
220			width: '70%',
221			textAlign: 'center'
222			},
223
224			balance: {
225			fontWeight: 'bold',
226			fontSize: 50
227			},
228
229			info: {
230			fontSize: 15,
231			width: '80%',
232			color: 'gray',
233			textAlign: 'center'
234			},
235
236			prepaidInfo: {
237			fontWeight: 'bold',
238			fontSize: 18
239			},
240
241			shadowProp: {
242			elevation: 5,
243			shadowColor: 'black'
244			},
245
246			modalContainer: {
247			backgroundColor: 'rgba(220, 220, 220, 0.6)',
248			width: '100%',
249			height: '100%',
250			flex: 1,
251			},
252
253			modalMessage: {
254			backgroundColor: 'white',
255			width: '100%',
256			height: '25%',
257			justifyContent: 'center',
258			alignItems: 'center',
259			borderRadius: 25
260			},
261
262			input: {
263			width: '90%',
264			marginBottom: 30,
265			borderRadius: 10,
266			height: 50,
267			padding: 10,
268			borderBottomWidth: 2,
269			borderColor: 'gray'
270			},
271			});

FalkenDev / SparkRentals-Mobile-App

History.tsx ➔ Wallet B last analyzed 2023-01-12 17:40 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

History.tsx ➔ Wallet B
last analyzed 2023-01-12 17:40 UTC